<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { classify } from "../classify/utils/hook";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useAdminHooks } from "@/views/common/admin";
import { useUserStore } from "@/store/modules/user";
import { all } from "@/api/news_create_config";

const { adminList, isSuperAdmin, currentUsername } = useAdminHooks();
const userStore = useUserStore();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    create_type: []
  })
});

const ruleFormRef = ref();

const newFormInline = ref({
  ...props.formInline,
  create_type: []
});

function getRef() {
  return ruleFormRef.value;
}

import { classifyFormat } from "@/views/formats";
const { classifyMenuOptions: typesMenuOptions } = classifyFormat("classify");

const { classifyMenuOptions: businessMenuOptions } = classifyFormat("business");

const configList = ref([]);
onMounted(async () => {
  const { data } = await all();
  configList.value = data.list;
});

const createTypeOptions = [
  { value: "1", label: "TOP排行(0%)" },
  { value: "2", label: "什么是(What)(0%)" },
  { value: "3", label: "如何(How)(0%)" },
  { value: "4", label: "常规类型(由平台自动默认创作)(100%)", disabled: true }
];

const toggleCreateType = value => {
  if (value === "4") return;

  if (!Array.isArray(newFormInline.value.create_type)) {
    newFormInline.value.create_type = [];
  }

  const index = newFormInline.value.create_type.indexOf(value);
  if (index === -1) {
    newFormInline.value.create_type = [value];
  } else {
    newFormInline.value.create_type.splice(index, 1);
  }
};

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <div class="form-item-vertical">
      <div class="form-item-label">规则名称</div>
      <div class="form-item-content">
        <el-input
          v-model="newFormInline.title"
          placeholder="我的特别生成规则"
        />
      </div>
    </div>
    <el-collapse>
      <el-collapse-item title="基础设置" name="1">
        <div class="form-item-vertical">
          <div class="form-item-label">通过什么生成</div>
          <div class="form-item-content">
            <el-select
              v-model="newFormInline.basis_create_type"
              placeholder="请选择配置"
            >
              <el-option label="关键字" value="1" />
              <el-option label="标题" value="2" />
              <el-option label="描述" value="3" />
            </el-select>
            <div class="form-item-description">选择通过什么方式创作文章</div>
          </div>
        </div>
        <div v-if="newFormInline.basis_create_type === '1'">
          <div class="form-item-vertical">
            <div class="form-item-label">
              关键词( 每行一篇，每行多关键词用','分割)
            </div>
            <div class="form-item-content">
              <el-input
                v-model="newFormInline.basis_keywords"
                type="textarea"
                placeholder="如何生成内容"
                rows="5"
              />
            </div>
          </div>
          <div class="form-item-vertical">
            <div class="form-item-label">包括关键字(每行1个)</div>
            <div class="form-item-content">
              <el-input
                v-model="newFormInline.basis_contain_keywords"
                type="textarea"
                placeholder="包括关键字(每行1个)"
                rows="5"
              />
            </div>
          </div>
        </div>
        <div v-if="newFormInline.basis_create_type === '2'">
          <div class="form-item-vertical">
            <div class="form-item-label">标题 (每行一个)</div>
            <div class="form-item-content">
              <el-input
                v-model="newFormInline.basis_title"
                placeholder="请输入标题"
                type="textarea"
                rows="5"
              />
              <div class="form-item-description">
                我们将为每行标题生成一篇文章。
              </div>
            </div>
          </div>
        </div>
        <div v-if="newFormInline.basis_create_type === '3'">
          <div class="form-item-vertical">
            <div class="form-item-label">公司或产品服务描述</div>
            <div class="form-item-content">
              <el-input
                v-model="newFormInline.basis_description"
                placeholder="用友是一家提供企业管理软件和服务的公司"
                type="textarea"
                rows="5"
              />
            </div>
          </div>
          <div class="form-item-vertical">
            <div class="form-item-label">包括关键字(每行1个)</div>
            <div class="form-item-content">
              <el-input
                v-model="newFormInline.basis_contain_keywords"
                placeholder="如何烘焙面包"
                type="textarea"
                rows="5"
              />

              <div class="form-item-description">
                我们会将这些关键字
                <span style="font-weight: bold">强制添加</span>
                到标题中。
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="创作类型" name="2">
        <div class="form-item-vertical">
          <div class="form-item-label">创作类型</div>
          <div class="form-item-content">
            <div class="tab-group">
              <div
                v-for="option in createTypeOptions"
                :key="option.value"
                class="tab-item"
                :class="{
                  active: newFormInline.create_type.includes(option.value),
                  disabled: option.disabled
                }"
                @click="!option.disabled && toggleCreateType(option.value)"
              >
                {{ option.label }}
              </div>
            </div>
          </div>
        </div>
        <!-- ;
          $step->html(Alert::make($info)->info()); }) ->add('创作类型', function
          ($step) { $step->checkbox('create_type', '创作类型') ->options([ 1 =>
          'TOP排行', 2 => '什么是 ( What ) ', 3 => '如何 ( How ) ' ])->when(1,
          function ($form) { $form->text('create_type_product_name',
          '产品名称')->placeholder('请输入产品名称');
          $form->textarea('create_type_product_description',
          '产品介绍')->placeholder('请输入产品介绍');
          $form->select('create_type_product_rank', '排名展现')->options([ 0 =>
          '全部随机', 1 => '第一名', 2 => '最后一名', 3 => '前三名', 4 =>
          "中间随机(去掉第一名和最后一名)" ]);
          $form->textarea('create_type_competitor', '竞品有哪些(多行,
          每行一个)')->placeholder('请输入竞品有哪些(多行, 每行一个)');
          $form->number('create_type_ratio_top',
          'TOP排行创作占比')->min(0)->max(100)->placeholder(''); })->when(2,
          function ($form) { $form->number('create_type_ratio_what', '什么是 (
          What )创作占比')->min(0)->max(100)->placeholder(''); $info =
          '根据创作文章的条件，来解释"什么是……"，比如说创作的规则中，包含了"物业管理系统"的关键词，创作的文章将会解释一下什么是物业管理系统。';
          $form->html(Alert::make($info)->info()); })->when(3, function ($form)
          { $form->number('create_type_ratio_how', '如何 ( How
          )创作占比')->min(0)->max(100)->placeholder(''); $info =
          '根据创作文章的条件，来解释"如何……"，比如说创作的规则中，包含了"减肥"的关键词，创作的文章将会解释一下如何让自己快速减肥。';
          $form->html(Alert::make($info)->info()); }); $info = '创作占比
          (此类文章所占百分比例，0-100之间的数字，其他剩余比例将创作常规类型的文章)';
          $step->html(Alert::make($info)->info()); }) ->add('内容设置', function
          ($step) use ($form) { $step->fieldset('内容格式', function ($step) {
          $step->checkbox('content_format', '内容格式') ->options([ 1 => '粗体',
          2 => '斜体', 3 => '表格(暂未实现)', 4 => '引文(暂未实现)', ]); }); 
        $step->fieldset('文章结构', function ($step) {
        $step->checkbox('article_structure', '文章结构') ->options([ 1 =>
        '内容摘要', 2 => '结论总结', 3 => '常见问题', ])->default([1, 2, 3]);
        $step->select('article_structure_size', '文章大小') ->options([ 1 =>
        '小(2-4个标题)', 2 => '中(5-8个标题)', 3 => '大(9-12个标题)', ]);
        $step->textarea('article_structure_title',
        '自定义标题')->placeholder('自定义标题(多行, 每行一个)'); }); });-->
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<style scoped>
:deep(.el-slider__runway) {
  background-color: #e9ecef;
}
:deep(.el-slider__bar) {
  background-color: #409eff;
}
:deep(.el-slider__stop) {
  background-color: #e9ecef;
}

.form-item-vertical {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
  width: 100%;
}

.form-item-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-item-content {
  width: 100%;
}

.keywords-description {
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.tab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  background-color: #fff;
  color: #606266;
  transition: all 0.2s;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}

.tab-item:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.tab-item.active {
  color: #fff;
  border-color: #409eff;
  background-color: #409eff;
}

.tab-item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media screen and (max-width: 768px) {
  .tab-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .tab-group {
    grid-template-columns: 1fr;
  }
}
</style>
